<template>
	<view>
		<view class="flex-ju-b color666 border-bECEDEE ">
			<view @click="tapci(index)" v-for="(item,index) in ['单词','词根','句子','课程','笔记']" class="flex-ju-c flex-col flex1 pb10" :class="{active:tindex==index}">
			{{item}}
			<view class="wh32-12 ra4  mt8">
				<image v-if="tindex==index" mode="widthFix" src="/static/tuibottom.png" class="image width32"></image>
			</view>
			
			</view>
		</view>
		<view class="flex-ju-b con pt30" v-if="tindex==1||tindex==0">
			<view  class="flex-a-i   posire zindex5 bgfff">
				<view @click="isall= !isall,isdanall=false" class="flex-ju-b size24 pg5-20 bgf9f9f9 ra30">
				{{zindex==1?'字母顺序':zindex==2?'字母倒序':zindex==3?'时间顺序':zindex==4?'时间倒序':'随机排序'}}		 
				<image v-if="isall" mode="widthFix" src="/static/xiangtop.png" class="image width32 ml10"></image>
				<image v-else mode="widthFix" src="/static/bottoms.png" class="image width32 ml10"></image>
				</view>
				<view @click="isdanall= !isdanall,isall=false" class="flex-ju-b size24 pg5-20 bgf9f9f9 ra30 ml30">
					{{foldername}}	 
					
					<image v-if="isdanall" mode="widthFix" src="/static/xiangtop.png" class="image width32 ml10"></image>
					<image v-else mode="widthFix" src="/static/bottoms.png" class="image width32 ml10"></image>
					
				</view>
			</view>
			<view v-if="tindex==1" @click="allopen" class="color666 mb8">全部{{iskai?'收起':'展开'}}</view>
		</view>
		
		<view  @touchstart="isall=false" v-if="isall" class="posifi mkds zindex55" style="background: rgba(0,0,0,0.6);">
			<view class="bgfff size28 pl30 pt30 mt-2" style="border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;">
				<view @touchstart.stop="tapsort(1)" :class="{aactive:zindex == 1}" class="border-bECEDEE height90 flex-a-i">字母顺序</view>
				<view @touchstart.stop="tapsort(2)" :class="{aactive:zindex == 2}" class="border-bECEDEE height90 flex-a-i">字母倒序</view>
				<view @touchstart.stop="tapsort(3)" :class="{aactive:zindex == 3}" class="border-bECEDEE height90 flex-a-i">时间顺序</view>
				<view @touchstart.stop="tapsort(4)" :class="{aactive:zindex ==4}" class="border-bECEDEE height90 flex-a-i">时间倒序</view>
				<view @touchstart.stop="tapsort(5)" :class="{aactive:zindex == 5}" class=" height90 flex-a-i">随机排序</view>
			</view>
		</view>
		
		<view  @touchstart="isdanall=false" v-if="isdanall" class="posifi mkds zindex55" style="background: rgba(0,0,0,0.6);">
			<view class="bgfff size28 pl30 pt30 mt-2" style="border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;">
				<view  v-for="(item,p) in folderlist" :key="p" @touchstart.stop="tapfolder(item,p)" :class="{aactive:cindex == p}" class="border-bECEDEE height90 flex-a-i">{{item.favoriteFolderName}}</view>
			</view>
		</view>
		
		
		<view class="con">
			<nodata v-if="isdata"></nodata>
			<view v-if="tindex==0"  v-for="(item,index) in list" :key="index" class="border-bECEDEE pb30 mt30">
					<view class="flex-ju-b">
						<view @click="navto('/pages/index/words_detail?id='+item.id)" class="ra32 bold mb20">{{item.word}}</view>
						<view>
							<view class="flex-a-i">
								<view @click="voice(item.pronounce)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
									<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
								</view>
								<view @click="tapopen(item,index,1)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
									<image mode="widthFix" src="/static/xings.png" class="image width28"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-ju-b color666">
						<view class=" size24 one flex1">{{item.paraphrase}}</view>
					</view>
				
			</view>
			<view v-if="tindex==1"  class=" pb30 mt30">
					<uni-collapse ref="collapse" v-model="open" class="viewcollapse" @change="change" >
						<uni-collapse-item :show-arrow="false" v-for="(item,index) in list" :key="index" @click.stop="zhaoa(item,index)" class="pb30 border-bECEDEE mt30" title-border="none" :name="'key'+index">
								<template v-slot:title>
									<view @click.stop="navto('/pages/index/root_detail?id='+item.id)" class="flex-ju-b mb20 ">
										<view class="ra32 bold " >{{item.root}}</view>
										<view>
											<view class="flex-a-i ">
												<view @click.stop="voice(item.pronounce)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
													<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
												</view>
												<view @click.stop="tapopen(item,index,2)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
													<image mode="widthFix" src="/static/xings.png" class="image width28"></image>
												</view>
											</view>
										</view>
									</view>
									<view  class="flex-ju-b color666">
										<view class=" size24 one flex1">{{item.meaning}}</view>
										<view class="flex-a-i size22">
											{{item.zhan?'收起':'展开'}}
											<image v-if="item.zhan" mode="widthFix" src="/static/xiangtop.png" class="flex image width32"></image>
											<image v-else mode="widthFix" src="/static/xiangxia.png" class="flex image width32"></image>
										</view>
									</view>
								</template>
								<view class="content">
									<view class="flex-a-i flex-wrap size24">
										<view  v-for="(items,s) in item.wordList" :key="s" class="mt20 pg2-20 border000 ra20 mr20">{{items}}</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
						
					<!-- <view class="flex-ju-b">
						<view @click="navto('/pages/index/root_detail?id='+item.id)" class="ra32 bold mb20">{{item.root}}</view>
						<view>
							<view class="flex-a-i">
								<view @click="voice(item.pronounce)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
									<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
								</view>
								<view @click="tapopen(item,index,2)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
									<image mode="widthFix" src="/static/xings.png" class="image width28"></image>
								</view>
							</view>
						</view>
					</view>
					<uni-collapse ref="collapse" @change="change($event,item)">
						<uni-collapse-item  title-border="none">
							<template v-slot:title>
								<view class="flex-ju-b color666">
									<view class=" size24 one flex1">{{item.paraphrase}}</view>
									<view class="flex-a-i size22">
										{{item.zhan?'收起':'展开'}}
									</view>
								</view>
							</template>
							<view class="content">
								<view class="flex-a-i flex-wrap size24">
									<view v-for="(items,s) in item.wordList" :key="s" class="mt20 pg2-20 border000 ra20 mr20">{{items}}</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse> -->
				
			</view>
			
			<view v-if="tindex==2" class="mt30">
				<view class="border-bECEDEE pb30 mb30" v-for="(item,i) in list" :key="i">
					<view @click="navto('/pages/index/words_detail?id='+item.id)" class="flex-a-i ">
						<view class="colorFD2F55 flex-ju-c  ra6 wh60-32 size20" style="background: rgba(253,47,85,0.08);">
							单词
						</view>
						<view class="size36 bold600 ml20 flex-a-i">
							{{item.word}} <image src="/static/jianr.png" mode="widthFix" class="image flex width32"></image>
						</view>
					</view>
					<view v-for="(items,h) in item.exampleInfoDtoList" :key="h" class="flex-ju-b mt20">
						<view @click="voice(items.exampleAudioUrl)" class="flex-a-i size28">
							<view class="mr20">
								<image mode="widthFix" src="/static/yuyin.png" class="width32"></image>
							</view>
							<view>
								<view>
									<mp-html :content="items.englishExample"></mp-html>
								</view>
								<view class="color666 mt10">{{items.chinaExample}}</view>
							</view>
						</view>
						<view @click="tapopen(items,i,3,h)" class="pl30">
							<image mode="widthFix" src="/static/xings.png" class="width28"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="tindex==3" class="mt30">
				<view @click="navto('/pages/index/ke_detail?id='+item.courseId+'&isToll='+item.isToll+'&discountPrice='+item.discountPrice+'&wordCount='+item.wordCount+'&originalPrice='+item.originalPrice)" v-for="(item,iun ) in list" :key="iun" class=" flex-a-i mt20 mb20 border-bECEDEE pb30 ">
					<view>
						<image mode="widthFix" :src="item.coverImage" class="wh290-164 ra20"></image>
					</view>
					<view class="ml10 flex1">
						<view class=" height164 flex-ju-b flex-col"  style="align-items: start;">
						<view class="flex-ju-b">
							<view class="size28 bold one">{{item.courseName}}</view>
							<image @click="cancelke(item,iun)" mode="widthFix" src="/static/xings.png" class="width31"></image>
						</view>
						<view class="size24 color666 two">{{item.summary}}</view>
						<view class="flex-ju-b  width1000">
							<image v-if="item.isToll==0" mode="widthFix" src="/static/mianfei.png"
								class="width136 image"></image>
							<view v-else class="flex-a-i">
								<template v-if="item.discountPrice>0">
									<view class="size40 colorFD2F55 bold"><text
											class="size22">￥</text>{{item.discountPrice}}</view>
									<view class="size24 color666 deleted-text">{{item.originalPrice}}</view>
								</template>
								<view v-else class="size40 colorFD2F55 bold"><text
										class="size22">￥</text>{{item.originalPrice}}</view>
							</view>
							<view class="size24 color999">共{{item.wordCount}}词</view>
						</view>
						</view>
						
					</view>
				</view>
				
			</view>
			<view v-if="tindex==4" class="mt30">
				<view v-for="(item,index) in list" :key="index" class="mb50 border-bEBEFF0">
				<view @click="tapdetail(item)" class="flex-a-i">
					<view class="colorFD2F55 flex-ju-c borderEBEFF0 ra6 wh60-32 size20" style="background: rgba(253,47,85,0.08);">
						{{item.noteType==1?'单词':'词根'}}
					</view>
					<view class="size36 bold600 ml20 flex-a-i">
						{{item.entry}}  <image src="/static/jianr.png" mode="widthFix" class="image flex width32"></image>
					</view>
				</view>
				<view class=" pg30 ra20 mt20">
					<view class="flex-ju-b  pb10 mb10" >
						<view class="flex-a-i color666">
							<image :src="item.avatarUrl" class="wh30-30 flex ra30 mr15"></image>
							{{item.nickName}}
						</view>
						<view @click="tapopen(item,index,5)">
							<image src="/static/xings.png" mode="widthFix" class="width32"></image>
						</view>
					</view>
					<view class="hidden">
						
					<view class="size28   pl20 " :class="{fith:item.isshow}" style="border-left:2px solid #FFF2F4;line-height: 23px;">
							{{item.note}}
					</view>
					</view>
					<view v-if="item.isshow" class="flex-ju-b mt10">
						<view></view>
						<view @click="kaizhan(item)" class="wh92-40 flex-ju-c border979797 ra40 size24">展开</view>
					</view>
					<view class="flex-a-i flex-wrap">
						<view v-for="(items,da) in item.images" :key="da" class="posire width190 mr20 mt20">
							<image @click="previewimg(item.images,da)" :src="items" class="image wh190-190 ra20"></image>
						</view>
					</view>
				</view>
					</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cindex:0,
				iskai:false,
				open:[],
				close:[],
				zindex:1,
				list:[],
				tindex:0,
				isdata:false,
				page:1,
				isall:false,
				isdanall:false,
				dictionaryType:1,
				folderlist:[],
				foldername:"",
				folderId:""
			}
		},
		onLoad() {
			// this.getfolder()
		},
		onReachBottom() {
			this.page++
			// if(this.tindex==0||this.tindex==1){
			// 	this.getfolder()
			// }else{
			// 	this.getlist()
			// }
			
			this.getlist()
		},
		onShow() {
			this.list=[]
			this.page=1
			if(this.tindex==0||this.tindex==1){
				this.getfolder()
			}else{
				this.getlist()
			}
		},
		methods: {
			zhaoa(item,index){
				if(item.zhan){
					item.zhan = false
				}else{
					item.zhan = true
				}
			},
			allopen(){
				this.iskai = !this.iskai
				
				if(this.iskai){
					this.open=this.close
					this.list.map(item=>{
						item.zhan = true
					})
				}else{
						this.open=[]
						this.list.map(item=>{
							item.zhan = false
						})
				}
				
			},
			celji(){
				this.http('/api/favorite_folder/page',{})
			},
			tapfolder(item,index){
				this.iskai=false
				this.open=[]
				this.cindex=index
				this.page=1
				this.list=[]
			    this.folderId = item.id
				this.foldername = item.favoriteFolderName
				this.getlist()
			},
			getfolder(){
				// this.page=1
				this.http('/api/favorite_folder/page',{
					dictionaryType:this.tindex+1
				},'post').then(res=>{
					this.folderlist = res.data
					if(res.data[0]){
						this.foldername = res.data[0].favoriteFolderName
						this.folderId = res.data[0].id
					}
					
					this.getlist()
				})
			},
			tapsort(index){
				this.zindex = index
				this.list=[]
				this.page=1
				this.getlist()
			},
			tapopen(item,index,type,windex){
				this.http('/api/folder_favorite_relation/cancel?entryId='+(item.id?item.id:item.exampleId)+'&type='+type,{
					entryId:item.id?item.id:item.exampleId,
					type
				}).then(res=>{
					this.toast('已取消')
					if(type==3){
						this.list[index].exampleInfoDtoList.splice(windex,1)
						if(!this.list[index].exampleInfoDtoList.length){
							this.list.splice(index,1)
						}
						
					}else{
						this.list.splice(index,1)
					}
					this.nodata(this.list,this)
				})
			},
			countLetters(str) {
			  const letterMatches = str.match(/[a-zA-Z]/g);
			  return letterMatches ? letterMatches.length : 0;
			},
			getlist(){
				this.http('/api/folder_favorite_relation/page',{
					favoriteType:this.tindex+1,
					pageNo:this.page,
					pageSize:206,
					sort:this.zindex,
					favoriteFolderId:this.folderId
				},'post').then(res=>{
					this.isall=false
					this.isdanall = false
					
					 if(res.data.courseList){
						
						var arr =[]
						res.data.courseList.map(item=>{
							arr.push(item.imageId)
						})
						
						this.httpimg(arr).then(ress=>{
							
							ress.data.map(item=>{
								res.data.courseList.map(items=>{
									if(item.fileId == items.imageId){
										items.coverImage = item.fileUrl
									}
								})
							})
							
							this.list=[...this.list,...res.data.courseList]
							
							this.nodata(this.list,this)
						})
						return
					}
					
					if(res.data.wordFavorite){
						this.list=[...this.list,...res.data.wordFavorite]
					}else if(res.data.rootFavorite){
						this.close=[]
						this.list=[...this.list,...res.data.rootFavorite]
						this.list.map((item,index)=>{
							 this.close.push('key'+index)
						})
						setTimeout(()=>{
							if(this.iskai){
								this.open=this.close
								this.list.map(item=>{
									item.zhan = true
								})
							}
						},220)
						
					}else if(res.data.exampleFavorite){
						
						res.data.exampleFavorite.map(items=>{
							items.exampleInfoDtoList.map(item=>{
								item.englishExample = this.wreplace(items.word,item.englishExample)
							})
						})
						this.list=[...this.list,...res.data.exampleFavorite]
					}else if(res.data.noteFavorite){
						
						
						res.data.noteFavorite.map(item => {
							var alllem=0;
							var zilem =0;
							 alllem =this.countLetters(item.note)/2
							const chineseChars = item.note.match(/[\u4e00-\u9fa5]/g);
							if(chineseChars){
								 zilem = chineseChars.length
							}
							
								if (alllem +zilem > 101) {
									item.isshow = true
								} else {
									item.isshow = false
								}
						})
						
						
						this.list=[...this.list,...res.data.noteFavorite]
					}
					this.nodata(this.list,this)
				})
			},
			cancelke(item,index){
				this.http('/api/folder_favorite_relation/cancel?entryId='+item.courseId+'&type=4').then(res=>{
					this.toast('取消成功')
					this.list.splice(index,1)
					this.nodata(this.list,this)
				})
			},
			tapci(index){
				this.iskai=false
				this.page=1
				this.cindex=0
				this.tindex=index
				this.list=[]
				if(index==2||index==3||index==4){
					 this.zindex=''
					 this.folderId=''
					 this.getlist()
				}else{
					this.getfolder()
				}
			},
			change(e,item){
				 
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},
			kaizhan(item){
				item.isshow = false
			},
			tapdetail(item){
				if(item.noteType==1){
					uni.navigateTo({
						url:"/pages/index/words_detail?id="+item.id
					})
				}else{
					uni.navigateTo({
						url:"/pages/index/root_detail?id="+item.id
					})
				}
			},
		}
	}
</script>

<style>
	.aactive{
		color:#FD2F55;
	}
	.fith{
		overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-box-align: start;
		    -webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
		}
.active{
		color:#000;
		font-weight: 600;
	}
	.mkds{
		width: 100vw;
		height: 100vh;
	}
</style>
